<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .row {
            padding: 20px 0;
            font-size: 14px;
            color: #666;
            white-space: normal;
        }

        #loading-box {
            z-index: 2018;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            background: rgba(0, 0, 0, .7);
            overflow: auto;
        }

        .pswp__preloader__icn {
            opacity: 0.75;
            width: 24px;
            height: 24px;
            -webkit-animation: clockwise 500ms linear infinite;
            animation: clockwise 500ms linear infinite;
        }

        /* The idea of animating inner circle is based on Polymer loading indicator by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */
        .pswp__preloader__cut {
            position: relative;
            width: 12px;
            height: 24px;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
        }

        .pswp__preloader__donut {
            box-sizing: border-box;
            width: 24px;
            height: 24px;
            border: 2px solid #ffffff;
            border-radius: 50%;
            border-left-color: transparent;
            border-bottom-color: transparent;
            position: absolute;
            top: 0;
            left: 0;
            background: none;
            margin: 0;
            -webkit-animation: donut-rotate 1000ms cubic-bezier(.4, 0, .22, 1) infinite;
            animation: donut-rotate 1000ms cubic-bezier(.4, 0, .22, 1) infinite;
        }

        @-webkit-keyframes clockwise {
            0% {
                -webkit-transform: rotate(0deg)
            }
            100% {
                -webkit-transform: rotate(360deg)
            }
        }

        @keyframes clockwise {
            0% {
                transform: rotate(0deg)
            }
            100% {
                transform: rotate(360deg)
            }
        }

        @-webkit-keyframes donut-rotate {
            0% {
                -webkit-transform: rotate(0)
            }
            50% {
                -webkit-transform: rotate(-140deg)
            }
            100% {
                -webkit-transform: rotate(0)
            }
        }

        @keyframes donut-rotate {
            0% {
                transform: rotate(0)
            }
            50% {
                transform: rotate(-140deg)
            }
            100% {
                transform: rotate(0)
            }
        }
    </style>
</head>
<body>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">单图片渲染</li>
        <li>文件打包</li>
        <li>转换PDF</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form class="layui-form" lay-filter="imgUrlForm">
                <div class="row">
                    <label class="layui-form-label" style="width: 85px;">单图片渲染：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="imgUrl" lay-verify="required" autocomplete="off" placeholder="请输入图片地址"
                               class="layui-input" value="20200922144701810_0233.png.webp">
                    </div>
                    <button id="img-url-btn" type="button" class="layui-btn" style="margin-left: 12px;"
                            onclick="clickOne()">查看
                    </button>
                </div>
            </form>
        </div>
        <div class="layui-tab-item">
            <div class="row">
                <label class="layui-form-label" style="width: 85px;">文件打包：</label>
                <button type="button" class="layui-btn" onclick="clickTwo()">下载</button>
                <label id="package-time" style="padding-left: 12px;"></label>
            </div>
        </div>
        <div class="layui-tab-item">
            <div class="row">
                <label class="layui-form-label" style="width: 85px;">转换PDF：</label>
                <button type="button" class="layui-btn" onclick="clickThree()">下载</button>
                <label id="pdf-time" style="padding-left: 12px;"></label>
            </div>
        </div>
    </div>
</div>

<div id="img-box"></div>

<div id="loading-box" style="display: none;">
    <span style="padding: 0px 16px;font-size: 17px;color: #ffffff;">处理中</span>
    <div class="pswp__preloader__icn">
        <div class="pswp__preloader__cut">
            <div class="pswp__preloader__donut"></div>
        </div>
    </div>
</div>

</body>
<script src="layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form', 'element'], function () {
        element = layui.element;
        form = layui.form;
    });
    var origin = window.location.origin;

    function getFile(url, id) {
        document.getElementById("loading-box").style.display = "";
        var sendDate = (new Date()).getTime();
        let xhr = new XMLHttpRequest();
        const downloadUrl = url;
        xhr.open('GET', downloadUrl, true);
        var start = window.performance.now();
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var end = window.performance.now();
                var time = ((end - start) / 1000).toFixed(2);
                document.getElementById(id).innerHTML = '耗时：' + time + 's';

                console.log(xhr.responseText)
                let fileUrl = origin + '/' + xhr.responseText;
                let header = xhr.getResponseHeader('Content-Disposition')
                let aNode = document.createElement('a');
                aNode.href = fileUrl;
                aNode.download = header;// Give filename you wish to download
                aNode.style.display = 'none';
                document.body.appendChild(aNode);
                aNode.click();
                document.getElementById("loading-box").style.display = "none";
            } else {
                // alert('失败');
                document.getElementById("loading-box").style.display = "none";
            }
        }
    }

    function clickOne() {
        var data = form.val('imgUrlForm');
        var imgUrl = data.imgUrl;
        if (imgUrl === '') {
            alert('请输入')
        }
        var img = new Image();
        img.src = imgUrl;
        var imgBox = document.getElementById('img-box');
        imgBox.innerHTML = '';
        imgBox.appendChild(img)
    }

    function clickTwo() {
        let url = origin + '/tool/v2/getZipFile'
        getFile(url, 'package-time');
    }

    function clickThree() {
        let url = origin + '/tool/v2/getImagePdf'
        getFile(url, 'pdf-time');
    }
</script>
</html>
